// // map中的配置选项,target 表示地图实例挂载的容器 view 表示地图的视图 Layers 表示地图的底图(都有一个底图) source 图层数据源
import Map from 'ol/Map'
import './style.css'
import 'ol/ol.css';
import ImageLayer from 'ol/layer/Image';
import ImageStatic from 'ol/source/ImageStatic';
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import { XYZ } from 'ol/source'
import { VectorLayer } from 'ol/layer'
import VectorSource from 'ol/source/Vector'
const view = new View({
  center: [114.25, 30.59],
  zoom: 10,
  projection: "EPSG:4326"// 经纬度底图
})
// 城市矢量底图--二维图 Z 表示缩放级别
const gaodeSource = new XYZ({
  url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',// 高德的数据源
})
const gaodeLayer = new TileLayer({
  source: gaodeSource
})

const map = new Map({
  target: 'map',
  view,
  layers: [gaodeLayer]
})
// 加载矢量图层，将一些矢量数据（很多格式，通常我们用geoJSON）加载到底图上
const vectorLayer = new VectorLayer({
  source: new VectorSource({
    url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000.json',
    // 处理对应的矢量数据格式
    format: new GeoJSON()
  })
})
map.addLayer(vectorLayer)